<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="top-box flexWrap">
					<view class="screen-box">
						<view class="nav-box flexWrapNo">
							<view class="nav-item" :class="{active:currmentIndex==0}" @tap="changeNav(0)">日</view>
							<view class="nav-item" :class="{active:currmentIndex==1}" @tap="changeNav(1)">月</view>
							<!-- <view class="nav-item" :class="{active:currmentIndex==2}" @tap="changeNav(2)">年</view> -->
						</view>
						<view class="date-box flexWrapNo" @tap="showDate()">
							<image src="/static/index/calendar.png" class="calendar-icon"></image>
							{{starTime}}～{{endTime}}
						</view>
					</view>
					<view class="memberData-img">
						<image src="/static/index/operatingData.png"></image>
					</view>
				</view>
				<!-- 日 -->
				<view class="date-boxs" v-if="dateFlag">
					<view class="date-title">时间筛选</view>
					<view class="date-cont flexWrap">
						<view class="screen-item flexWrap">
							<picker mode="date" :data-index='0' :value="starTime" @change="bindDateChange"
								start="2022-01-01" :end="date" :fields="fields">
								<view class="select-input">{{starTime}}</view>
							</picker>
							<text class="triangle"></text>
						</view>
						<view class="screen-item flexWrap">
							<picker mode="date" :data-index='1' :value="date" @change="bindDateChange" :start="starTime"
								:end="date" :fields="fields">
								<view class="select-input">{{endTime}}</view>
							</picker>
							<text class="triangle"></text>
						</view>
					</view>
					<view class="determine-btn flexWrapNo">
						<!-- <view @tap="reSet()">重置</view> -->
						<view class="determine" @tap="submit()">确认</view>
					</view>
				</view>
				<view class="mask-wrap" v-if="dateFlag" @tap="closeDate()"></view>
				<view class="profit-box">
					<view class="profit-top flexWarpCenterColumn">
						<view>{{operatingData.tatal_income||'0.00'}}</view>
						<view class="profit-text">总收入</view>
					</view>
					<view class="profit-cont flexWrapNo">
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.order_count||'0.00'}}</view>
							<view class="profit-text">已结账订单</view>
						</view>
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.cashout_amount||'0.00'}}</view>
							<view class="profit-text">可提现金额</view>
						</view>
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.recharge_money||'0.00'}}</view>
							<view class="profit-text">充值收入</view>
						</view>
						<!-- <view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.yhjqk||'0.00'}}</view>
							<view class="profit-text">优惠券扣除</view>
						</view>
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.ye_sum||'0.00'}}</view>
							<view class="profit-text">余额扣除</view>
						</view> -->
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.order_online_amount||'0.00'}}</view>
							<view class="profit-text">订单收入</view>
						</view>
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.tuan_amount||'0.00'}}</view>
							<view class="profit-text">美团收入</view>
						</view>
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.douyin_amount||'0.00'}}</view>
							<view class="profit-text">抖音收入</view>
						</view>
						<!-- <view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.card_amount||'0.00'}}</view>
							<view class="profit-text">通卡收入</view>
						</view> -->
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.platform_commission||'0.00'}}</view>
							<view class="profit-text">系统服务费</view>
						</view>
						<view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.bank_amount||'0.00'}}</view>
							<view class="profit-text">银行手续费</view>
						</view>
						<!-- <view class="profit-item flexWarpCenterColumn">
							<view>{{operatingData.refund_money||'0.00'}}</view>
							<view class="profit-text">退款金额</view>
						</view> -->
					</view>
				</view>
				<view class="data-box">
					<view class="data-item" v-for="(item,index) in dataList" :key="index"
						@tap="goOperatingDetails(item)">
						<view class="data-info flexWrap">
							<text>{{item.time}}</text>
							<text>{{item.tatal_income}}</text>
						</view>
						<view class="progress-box">
							<view class="progress-child" :style="{width:item.progress}"></view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const starDate = this.getDate('start', 'day')
			return {
				pageOpc: 0,
				currmentIndex: 0,
				dataList: [],
				operatingData: {
					yjz:0,
					order_ze:0,
					cz_sum:0,
					yhjqk:0,
					ye_sum:0,
					meituan_sum:0
				},
				starTime: starDate,
				endTime: currentDate,
				date: currentDate,
				dateFlag: false,
				fields: 'day'
			}
		},
		onLoad() {
			this.getBusinessStatement();
			// this.getBusinessStatements();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			// 获取时间
			getDate(type, fields) {
				const date = new Date();
				date.setDate(date.getDate() - 1);
				if (type == 'start' && fields == 'day') { //粒度为天
					date.setDate(date.getDate() - 6);
				}
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type == 'start' && fields == 'year') { //粒度为年
					if (year != 2022) {
						year = year - 1
					}
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				let result = ``
				if (fields == 'month') {
					result = `${year}-${month}`
				} else if (fields == 'year') {
					result = `${year}`
				} else {
					result = `${year}-${month}-${day}`
				}
				return result;
			},
			// 选择时间
			bindDateChange(e) {
				console.log(e.target.value)
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.starTime = e.target.value
				} else {
					this.endTime = e.target.value
				}
			},
			// 重置
			reSet() {
				this.starTime = this.getDate('start')
				this.endTime = this.getDate({
					format: true
				})
			},
			// 提交
			submit() {
				this.getBusinessStatement();
				// this.getBusinessStatements();
				this.closeDate();
			},
			showDate() {
				this.dateFlag = !this.dateFlag
			},
			closeDate() {
				this.dateFlag = false
			},
			changeNav(index) {
				this.currmentIndex = index
				if (this.currmentIndex == 0) {
					this.fields = 'day'
					this.starTime = this.getDate('start', 'day')
					this.endTime = this.getDate('', 'day')
				} else if (this.currmentIndex == 1) {
					this.fields = 'month'
					this.starTime = this.getDate('start', 'month')
					this.endTime = this.getDate('', 'month')
				} else {
					this.fields = 'year'
					this.starTime = this.getDate('start', 'year')
					this.endTime = this.getDate('', 'year')
				}
				this.getBusinessStatement();
				// this.getBusinessStatements();
			},
			// 营业报表
			getBusinessStatement() {
				this.$request.post(this.$api.businessStatement, {
					store_id: uni.getStorageSync('store_id'),
					start_time: this.starTime,
					end_time:this.endTime,
					type: this.fields
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.operatingData = data.statistics
						this.dataList = data.list
						for (let i in this.dataList) {
							this.dataList[i].progress=Number(this.dataList[i].tatal_income/800)*100+'%'
						}
					}
				})
			},
			getBusinessStatements() {
				this.$request.post(this.$api.businessStatements, {
					store_id: uni.getStorageSync('store_id'),
					start_time: this.starTime,
					end_time:this.endTime,
					type: this.fields
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						this.dataList = data
						for (let i in this.dataList) {
							this.dataList[i].progress=Number(this.dataList[i].order_ze/800)*100+'%'
							if (this.currmentIndex == 1) {
								this.dataList[i].time = this.dataList[i].time.split('-')[0] + '-' + this.dataList[i].time.split('-')[1]
							} else if (this.currmentIndex == 2) {
								this.dataList[i].time = this.dataList[i].time.split('-')[0]
							}
						}
						console.log(this.dataList)
					}
				})
			},
			goOperatingDetails(operatingInfo) {
				uni.setStorageSync('operatingInfo', operatingInfo)
				uni.navigateTo({
					url: '/pages/index/operatingDetails'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 50upx;
	}
	.content {
		padding: 0 36upx;
	}

	.triangle {
		border-top-color: #FFFFFF;
	}

	.top-box {
		.screen-box {
			.date-box {
				margin-top: 32upx;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 60upx;
				color: #6E6E6E;

				.calendar-icon {
					width: 48upx;
					height: 48upx;
					margin-right: 24upx;
				}
			}

			.nav-box {
				.nav-item {
					width: 80upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 16upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
					margin-right: 20upx;
				}

				.active {
					background-color: #EEC162;
				}
			}
		}

		.memberData-img {
			width: 228upx;
			height: 228upx;
		}
	}

	.profit-box {
		height: 684upx;
		background: #fff;
		border-radius: 16upx;
		padding: 0 30upx;

		.profit-top {
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 66upx;
			color: #040336;
			padding-top: 36upx;
			padding-bottom: 46upx;
			border-bottom: 2upx solid #DDDDDD;

			.profit-text {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34upx;
				color: #666666;
				margin-top: 8upx;
			}
		}

		.profit-cont {
			flex-wrap: wrap;
			margin-top: 34upx;

			.profit-item {
				font-size: 46upx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 66upx;
				color: #040336;
				width: 33%;
				margin-bottom: 44upx;

				.profit-text {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34upx;
					color: #666666;
					margin-top: 8upx;
				}
			}
		}
	}

	.data-box {
		margin-top: 40upx;

		.data-item {
			margin-top: 20upx;

			.data-info {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 60upx;
				color: #333333;
			}

			.progress-box {
				height: 20upx;
				background: #EDEDED;
				border-radius: 20upx;

				.progress-child {
					height: 20upx;
					background: #EEC162;
					border-radius: 20upx;
					width: 100%;
					max-width: 100%;
				}
			}
		}
	}


	.mask-wrap {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 99;
		background: rgba(0, 0, 0, .4);
	}
</style>
